<template>
	<div class="zBox">
		<p class="date_change">
			<el-icon @click="previousMonth()"><ArrowLeftBold /></el-icon>
			<span>{{ moment(date).format('YYYY年MM月') }}</span>
			<el-icon @click="nextMonth()"><ArrowRightBold /></el-icon>
			<span class="today" @click="comeToday()">返回今天</span>
		</p>
		<ul ref="uploadImgBtn" class="imgBtn">
			<li class="grey">SUN.日</li>
			<li>MON.一</li>
			<li>TUES.二</li>
			<li>WEB.三</li>
			<li>THUR.四</li>
			<li>FRI.五</li>
			<li class="grey">SAT.六</li>
		</ul>

		<el-calendar>
			<template #date-cell="{ data }">
				<div v-if="calendarData[data.day]" style="height: 100%;width: 100%;position: relative;" class="" :class="data.isSelected ? 'is-selected' : ''" @click="cfClick(calendarData[data.day])">
					<p class="dateRl">{{ data.day.substr(data.day.length - 2, 2) }}</p>
					<span class="isPunched" v-if="calendarData[data.day].type == 0 && calendarData[data.day].workday == 1"></span>
					<span class="noPunched" v-if="calendarData[data.day].type == 1 && calendarData[data.day].workday == 1"></span>
					<el-popover

						placement="bottom-start"
						:width="250"
						trigger="click"
						:visible="calendarData[data.day].isOk"
						:hide-after="0"
						:offset="-60"
					>
						<template #reference>
							<div class="tk" @click="getAlldata(calendarData[data.day].date)"></div>
						</template>
						<p class="dateBu">{{ moment(calendarData[data.day].date).format('YYYY年MM月DD日') }}</p>

						<ul class="dkList">
							<li>
								<span v-if="dayData[0].status !== null" :class="dayData[0].status == 4 ? 'dkZcZt' : 'dkYcZt'"></span>
								<span v-else class="mrzt"></span>
								<span>上班（{{ shift.startTime1 }}）</span>
								<span class="dkNzt" v-if="dayData[0].status !== null" :style="{ background: dkZt[dayData[0].status].color }">
									{{ dkZt[dayData[0].status].lable }}
								</span>
							</li>
							<li class="dkLi" v-for="(item, index) in morningUplist">
								<div class="">
									<span class="dkTime" v-if="item.userCheckTime">{{ item.userCheckTime.slice(11, 16) }}</span>
									<span class="dkType" v-if="item.sourceType">
										{{ item.sourceType == 'CAMERA' ? '摄像头打卡' : item.sourceType == 'HK' ? '门禁打卡' : item.address }}
									</span>
									<span v-if="item.sourceType == 'OUT'" class="wqs">【外勤】</span>
								</div>

								<p v-if="item.sourceType == 'OUT'" class="bzStyle">
									{{ '备注：' + item.remark }}
									<u @click="bigImgOut(item.phoneUrl)">【查看图片】</u>
								</p>
							</li>
							<li>
								<span v-if="dayData[1].status !== null" :class="dayData[1].status == 4 ? 'dkZcZt' : 'dkYcZt'"></span>
								<span v-else class="mrzt"></span>
								<span>下班（{{ shift.endTime1 }}）</span>
								<span class="dkNzt" v-if="dayData[1].status !== null" :style="{ background: dkZt[dayData[1].status].color }">
									{{ dkZt[dayData[1].status].lable }}
								</span>
							</li>

							<li class="dkLi" v-for="(item, index) in morningDownlist">
								<div class="">
									<span class="dkTime" v-if="item.userCheckTime">{{ item.userCheckTime.slice(11, 16) }}</span>
									<span class="dkType" v-if="item.sourceType">
										{{ item.sourceType == 'CAMERA' ? '摄像头打卡' : item.sourceType == 'HK' ? '门禁打卡' : item.address }}
									</span>
									<span v-if="item.sourceType == 'OUT'" class="wqs">【外勤】</span>
								</div>
								<p v-if="item.sourceType == 'OUT'" class="bzStyle">
									{{ '备注：' + item.remark }}
									<u @click="bigImgOut(item.phoneUrl)">【查看图片】</u>
								</p>
								
							</li>
							<li>
								<span v-if="dayData[2].status !== null" :class="dayData[2].status == 4 ? 'dkZcZt' : 'dkYcZt'"></span>
								<span v-else class="mrzt"></span>
								<span>上班（{{ shift.startTime2 }}）</span>
								<span class="dkNzt" v-if="dayData[2].status !== null" :style="{ background: dkZt[dayData[2].status].color }">
									{{ dkZt[dayData[2].status].lable }}
								</span>
							</li>
							<li class="dkLi" v-for="(item, index) in afterUplist">
								<div class="">
									<span class="dkTime" v-if="item.userCheckTime">{{ item.userCheckTime.slice(11, 16) }}</span>
									<span class="dkType" v-if="item.sourceType">
										{{ item.sourceType == 'CAMERA' ? '摄像头打卡' : item.sourceType == 'HK' ? '门禁打卡' : item.address }}
									</span>
									<span v-if="item.sourceType == 'OUT'" class="wqs">【外勤】</span>
								</div>

								<p v-if="item.sourceType == 'OUT'" class="bzStyle">
									{{ '备注：' + item.remark }}
									<u @click="bigImgOut(item.phoneUrl)">【查看图片】</u>
								</p>
							</li>

							<li>
								<span v-if="dayData[3].status !== null" :class="dayData[3].status == 4 ? 'dkZcZt' : 'dkYcZt'"></span>
								<span v-else class="mrzt"></span>
								<span>下班（{{ shift.endTime2 }}）</span>
								<span class="dkNzt" v-if="dayData[3].status !== null" :style="{ background: dkZt[dayData[3].status].color }">
									{{ dkZt[dayData[3].status].lable }}
								</span>
							</li>
							<li class="dkLi" v-for="(item, index) in afterDownlist">
								<div class="">
									<span class="dkTime" v-if="item.userCheckTime">{{ item.userCheckTime.slice(11, 16) }}</span>
									<span class="dkType" v-if="item.sourceType">
										{{ item.sourceType == 'CAMERA' ? '摄像头打卡' : item.sourceType == 'HK' ? '门禁打卡' : item.address }}
									</span>
									<span v-if="item.sourceType == 'OUT'" class="wqs">【外勤】</span>
								</div>
								<p v-if="item.sourceType == 'OUT'" class="bzStyle">
									{{ '备注：' + item.remark }}
									<u @click="bigImgOut(item.phoneUrl)">【查看图片】</u>
								</p>
							</li>
						</ul>
					</el-popover>
				</div>
				<div v-if="!calendarData[data.day]" class="" style="height: 100%;width: 100%;" @click="cfClick()">
					<p class="dateRl">{{ data.day.substr(data.day.length - 2, 2) }}</p>
					<div class=""></div>
				</div>
			</template>
		</el-calendar>
		<el-dialog v-model="outImgDialog" class="dkDia" title="外勤打卡信息" width="30%" :close-on-click-modal="false" top="5vh">
			<el-image :src="outImgUrl" style="width: 100%;">
				<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
			</el-image>
		</el-dialog>
	</div>
</template>

<script setup>
import moment from 'moment';
import { getMonthData, getUserDataByDate, cardList } from '@/api/hkd';
import useUserStore from '@/store/modules/user';
const date = ref('');
const month = ref('');
const uploadImgBtn = ref(null);
const calendarData = ref({});
const punchCardList = ref([]);
const shift = ref({});
const morningUplist = ref([]);
const morningDownlist = ref([]);
const afterUplist = ref([]);
const afterDownlist = ref([]);
const outImgUrl = ref('');
const outImgDialog = ref(false);
const isEmpty = ref('');
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const dayData = ref([
	{
		status: null
	},
	{
		status: null
	},
	{
		status: null
	},
	{
		status: null
	}
]);
const dkZt = ref({
	0: { color: '#f56c6c', lable: '未打卡' },
	1: { color: '#f56c6c', lable: '缺卡' },
	2: { color: '#f56c6c', lable: '迟到' },
	3: { color: '#f56c6c', lable: '请假' },
	4: { color: '#aaf4a5', lable: '正常' }
});
const userId = ref(useUserStore().userId);
const dingUserId = ref(useUserStore().dingUserId);
let prevBtn = undefined;
let nextBtn = undefined;
let todayBtn = undefined;
onMounted(() => {
	initDom();
});
date.value = moment().format('YYYY-MM');
month.value = moment().format('YYYY-MM');
function initDom() {
	document.getElementsByTagName('thead')[0].style.visibility = 'hidden';
	document.getElementsByTagName('thead')[0].style.display = 'block';
	document.getElementsByTagName('thead')[0].style.height = '0';
	document.getElementsByClassName('el-calendar__header')[0].style.visibility = 'hidden';
	document.getElementsByClassName('el-calendar__header')[0].style.height = '0';
	prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
	nextBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:last-child');
	todayBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
}
function previousMonth() {
	let amonth = date.value;
	date.value = moment(amonth)
		.subtract(1, 'months')
		.format('YYYY-MM');
	prevBtn.click();
	getAllMonthData();
}

function nextMonth() {
	let amonth = date.value;
	date.value = moment(amonth)
		.add(1, 'months')
		.format('YYYY-MM');
	nextBtn.click();
	getAllMonthData();
}
function comeToday() {
	date.value = moment().format('YYYY-MM');
	todayBtn.click();
	getAllMonthData();
}
// 获取日历数据
function getAllMonthData() {
	getMonthData({
		userId: userId.value,
		month: date.value
	}).then(res => {
		let newObj = {};
		const obj = { ...res.data };
		for (var i = 0; i < res.data.length; i++) {
			obj[i]['isOk'] = false;
			newObj[obj[i].date] = obj[i];
		}
		let form = JSON.parse(JSON.stringify(newObj));
		console.log(form);
		calendarData.value = form;
	});
}
function cfClick(row) {
	if(!row){
		if(isEmpty.value){
			isEmpty.value.isOk = false;
			isEmpty.value = '';
		}else{

		}
	}else{
		if (isEmpty.value) {
			if (row == isEmpty.value) {
				row.isOk = !row.isOk;
				isEmpty.value = '';
			} else {
				isEmpty.value.isOk = false;
				row.isOk = !row.isOk;
				isEmpty.value = row;
			}
		} else {
			isEmpty.value = row;
			row.isOk = !row.isOk;
		}
	}

}

function getAlldata(date) {
	let form = {
		userId: userId.value,
		date: date
	};
	dayData.value = [
		{
			status: null
		},
		{
			status: null
		},
		{
			status: null
		},
		{
			status: null
		}
	];

	getUserDataByDate(form).then(res => {
		morningDownlist.value = [];
		morningUplist.value = [];
		afterDownlist.value = [];
		afterUplist.value = [];
		shift.value = res.data.shift;

		res.data.punchCardList.forEach(ele => {
			if (ele.state == 1) {
				dayData.value[0].status = ele.status;
			} else if (ele.state == 2) {
				dayData.value[1].status = ele.status;
			} else if (ele.state == 3) {
				dayData.value[2].status = ele.status;
			} else if (ele.state == 4) {
				dayData.value[3].status = ele.status;
			}
		});
		cardList({
			date: date,
			dingUserId: dingUserId.value
		}).then(res => {
			punchCardList.value = res.data.reverse();
			let morningUp = date + '\xa0' + shift.value.endTime1;
			let morningDown = moment(date + '\xa0' + shift.value.startTime2)
				.subtract(30, 'minutes')
				.format('YYYY-MM-DD HH:mm:ss');
			let aftDown = date + '\xa0' + shift.value.endTime2;
			punchCardList.value.map(item => {
				item.userCheckTime = item.userCheckTime.replaceAll('-', '/');
				//早上上班(8:00-11:30)
				if (new Date(item.userCheckTime).getTime() < new Date(morningUp).getTime()) {
					morningUplist.value.push(item);
				} else if (new Date(morningUp).getTime() <= new Date(item.userCheckTime).getTime() && new Date(item.userCheckTime).getTime() < new Date(morningDown).getTime()) {
					morningDownlist.value.push(item);
				} else if (new Date(morningDown).getTime() <= new Date(item.userCheckTime).getTime() && new Date(item.userCheckTime).getTime() < new Date(aftDown).getTime()) {
					afterUplist.value.push(item);
				} else {
					afterDownlist.value.push(item);
				}
			});
		});
	});
}
function bigImgOut(item) {
	outImgDialog.value = true;
	outImgUrl.value = baseUrl + '/' + item;
}
getAllMonthData();
</script>

<style lang="scss" scoped>
ul {
	padding: 20px 20px 0px 20px;
	display: flex;
	justify-content: space-evenly;
	text-align: center;
	margin: 0;
	// min-width: 1116px;
	li {
		list-style: none;
		width: 13.5%;
		background: #ffdbdd;
		color: #be1a21;
		padding: 8px 0;
		font-weight: 600;
		border-radius: 3px;
	}
}
.date_change {
	padding-top: 30px;
	position: relative;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	span {
		margin: 0 20px;
		font-size: 22px;
	}
	.el-icon {
		cursor: pointer;
	}
}
u {
	cursor: pointer;
	color: #000;
}
.today {
	position: absolute;
	right: 20px;
	padding: 6px 10px;
	background: #eeeeee;
	border-radius: 4px;
	color: #999999;
	cursor: pointer;
	font-size: 16px !important;
}
.today:hover {
	background: #d0d0d0;
	color: #ffffff;
}
.grey {
	background: #eeeeee;
	color: #1e1e1e;
}
:deep(.el-calendar) {
	.el-calendar-day {
		height: 13vh;
	}
	.el-calendar__body {
		padding-bottom: 0;
		padding: 12px 30px 25px;
	}
	.current {
		position: relative;
	}
}
.isPunched {
	position: absolute;
	right: 0.9375rem;
	top: 0.9375rem;
	display: inline-block;
	border-radius: 50%;
	width: 1.4rem;
	height: 1.4rem;
	background: url(../../assets/images/mainImg/ok.png) no-repeat;
	background-size: contain;
}

.noPunched {
	position: absolute;
	right: 0.9375rem;
	top: 0.9375rem;
	display: inline-block;
	border-radius: 50%;
	width: 1rem;
	height: 1rem;
	background: #f51f28;
}
.xdwF {
	width: 100%;
	height: 113px;
	position: absolute;
	top: -42px;
	right: -8px;
}
.tk {
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.dkList {
	display: flex;
	flex-flow: column;
	justify-content: start;
	text-align: left;
	margin-top: 8px;
	padding: 0;
	max-height: 350px;
	overflow: auto;
	li {
		width: 92%;
		// margin-bottom: 10px;
		display: flex;
		flex-flow: row;
		justify-content: flex-start;
		align-items: center;
		background: none;
		padding: 4px 0;
		span {
			color: #1e1e1e;
			font-weight: 400;
		}
	}
	.dkZcZt {
		width: 0.4rem;
		height: 0.4rem;
		background: #1ac45f !important;
		border-radius: 50%;
		margin-right: 8px;
	}
	.dkYcZt {
		width: 0.4rem;
		height: 0.4rem;
		background: #f51f28 !important;
		border-radius: 50%;
		margin-right: 8px;
	}
	.mrzt {
		width: 0.4rem;
		height: 0.4rem;
		background: #d6d6d6;
		border-radius: 50%;
		margin-right: 8px;
	}
}
.dateBu {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1e1e1e;
}
.dkTime {
	color: #1ac45f !important;
	font-weight: 400;
	margin-right: 0.625rem;
}
.dkType {
	color: #999999 !important;
	font-weight: 400;
}
.dkNzt {
	padding: 0.0625rem 0.3125rem;
	border-radius: 0.3125rem;
	color: #ffffff !important;
	font-weight: 400;
	font-size: 12px;
}
.dkLi {
	display: flex !important;
	flex-flow: column !important;
	align-items: flex-start !important;
	margin-left: 1rem;
	padding: 0 !important;
	p {
		margin: 0;
		margin-top: 0.25rem;
		margin-left: 0.15rem;
		font-size: 12px;
		font-weight: 400;
	}
}
.wqcls {
	margin-left: 0;
	padding: 1px 5px;
	border: 0.01em #3cb87f solid;
	border-radius: 0.2em;
	color: #3cb87f;
	font-weight: 400;
	font-size: 12px;
}
.bzStyle {
	color: #a3a5a6;
	margin-left: 15px;
	font-size: 14px;
}
.lookImg {
	border: 1px solid #f78989;
	cursor: pointer;
	color: #f78989;
	padding: 1px 5px;
	font-size: 10px;
	margin-left: 10px;
}
.zBox {
	height: 99.8%;
	background-color: #ffffff;
	border-radius: 10px;
	overflow: auto;
}
:deep(.el-calendar) {
	.current {
		font-size: 22px;
	}
	.el-calendar-table__row {
		.next,
		.prev {
			font-size: 22px;
			pointer-events: none;
		}
	}
}
.dateRl {
	font-size: 22px;
	margin: 0;
}
</style>
